<template>
  <div>
      <div class="Chat_top">
          <img src="static/img/back.png" alt="" height="25" @click="T()">
          <span>{{this.toname}}</span>
          <span></span>
      </div>
      <div class="Chat_body">

        <!-- <div>
          <p class="Chat_time">02月01日 22：43</p>
          <div class="Chat_to">
              <div class="Chat_t"> 
                  <div class="Chat_ttextbox">
                    <span>十多万dsafdg的萨芬的过分的话估计会更健康发的规范施工费多少阿杜是发达的规划股份的脚后跟</span>
                  </div>
                  <img :src="mytx" class="imgs">
              </div>
          </div>
       </div>
       <div>
         <p class="Chat_time">03月03日 22：43</p>
          <div class="Chat_from">
              <div class="Chat_t">
                  <img src="static/img/tx.jpg" class="imgs">
                  <div class="Chat_ftextbox">
                    <img src="static/img/fm.jpg" alt="" class="img" preview="1" preview-text="">
                  </div>
              </div>
          </div>
        </div> -->

        <div v-for="(chat,index) in Chathistory" :key="index">
         <p class="Chat_time">{{chat.time}}</p>
          <div  v-bind:class="chat.from==myid? 'Chat_to' : 'Chat_from'">
              <div class="Chat_t">
                  <img :src="chat.ftx" class="imgs" v-if="chat.from!=myid"><!-- 他的头像 -->
                  <div v-bind:class="chat.from==myid ? 'Chat_ttextbox' : 'Chat_ftextbox'">
                    <span v-if="chat.body!=''" class="chat_text">{{chat.body}}</span>
                    <img v-else :src="chat.img" alt="" class="img" preview="1" preview-text="">
                  </div>
                  <img :src="mytx" class="imgs" v-if="chat.from==myid"><!-- 我的头像 -->
              </div>
          </div>
        </div>

      </div>

<div class="schat">
  <div class="footer">
  <el-upload
        class="upload"
        action="http://localhost:3000/api/upload"
        :on-success="handleAvatarSuccess"
        :show-file-list='false'
        v-show="Msg==''? true:false">
  <img src="static/img/图片.png" width="35" height="35" @click="isshow=false">
  </el-upload>
  <input class="Pinput"  type="text" v-model="Msg">
  
  
  <img src="static/img/表情.png" width="35" height="35" @click="isshow==false? isshow=true:isshow=false">
  <button class="Psend" @click="send()">发送</button> 
  </div>
  
<div class="bqbox">
<div class="bq" v-show="isshow" v-for="(item,index) in bq" :key="index">
<span v-for="(i,index) in item" :key="index" @click="Msg+=i;isshow=false">{{i}}</span>
</div> 
</div>  

</div> 

  </div>
</template>

<script>
export default {
  data(){
    return{
      myid:this.$store.state.wd.wdid,
      mytx:this.$store.state.wd.wdtx,
      myname:this.$store.state.wd.wdname,
      toid:this.$route.params.tid,
      totx:'',
      toname:'',
      Chathistory:[],
      Msg:'',
      bq:[
          ['😂', '😭', '😹', '🙏', '😁', '😃', '😄', '😅',
          '😆', '😇', '😉', '😊', '😋', '😌', '😍', '😘',
          '😚', '😜', '😝', '😎', '😏', '😶', '😐' ,'😒',
          '😳', '😞', '😠', '😡', '😔', '😣', '😖' ,'😫',
          '😩', '😤', '😨', '😰', '😢', '😥', '😵', '👷',
          '😲', '😷', '💤', '🙌', '👏', '👋', '👊', '👌',
          '💪', '👍', '👆', '👇', '👈', '👉', '💩', '😈',
          '👿', '👹', '👺', '💀', '👻', '👽', '😺', '😸',
          '😻', '😼', '😽', '🙀', '😿', '😾', '👄', '💂',
          '👅', '👂', '👃', '👀', '👤', '👶', '👦', '👧',
          '👨', '👩', '👱', '👴', '👵', '👲', '👳', '👮',
          ],
            ],
      isshow:false,
    }
  },
  mounted(){
    this.getto();
    this.getchat();
    $('html, body').animate({scrollTop: $(document).height()}, 50);//滚动到底
  },
  methods:{
    T(){
      this.$router.go(-1);
    },
    send(){//发
      var that = this;
      var date = new Date();
      var Month = date.getMonth()+1;
      var Day = date.getDate();
      var Hours = date.getHours();
      var Minutes = date.getMinutes();
      var time = Month + '月' + Day + '日' + '--' + Hours + ':' + Minutes;
      var req = {
      'from':this.myid,
      'fname':this.myname,
      'ftx':this.mytx,
      'to':this.toid,
      'tname':this.toname,
      'ttx':this.totx,
      'type':'plain',
      'body':this.Msg,
      'time':time,
      'img':''};
      //判断是否空
      if(this.Msg!=''){
      //插入数据库
      // this.$http.post("http://localhost:3000/api/addchat",{
      //     from:this.myid,
      //     fname:this.myname,
      //     ftx:this.mytx,
      //     to:this.toid,
      //     tname:this.toname,
      //     ttx:this.totx,
      //     text:this.Msg,
      //     img:'',
      //     status:1,
      //     ttime:time,
      //   },{emulateJSON: true})
      //   .then(
      //   (response)=>{
      //     // if(this.$store.state.userlist.indexOf(this.toid) > -1){
      //     //   that.$socket.emit('send_private_message', req);
      //     // }
      //     // that.Msg='';
      //     // that.Chathistory.push(req);
      //           },
      //   (error)=>{
      //   console.log(error);
      //         }
      //     );
          that.$socket.emit('send_private_message', req);
          that.Msg='';
          that.Chathistory.push(req);
          }
      $('html, body').animate({scrollTop: $(document).height()}, 50);//滚动到底
      },
      getto(){
        this.$http.post("http://localhost:3000/users/Autologin",{
          User_id:this.toid
        },{emulateJSON: true})
        .then(
        (response)=>{
          this.toname = response.data.msg.user.User_name;
          this.totx = response.data.msg.user.User_tx;
          console.log(response);
                },
        (error)=>{
        console.log(error);
              }
          );
        },
        getchat(){
          var that = this;
          var to = this.toid;
          var from = this.myid;
          that.$http.get("http://localhost:3000/api/getchat/" + to +'/'+ from)
          .then(
          (response)=>{
            for(let i = 0; i < response.data.msg.chats[0].body.length;i++){
            if(response.data.msg.chats[0].body[i].sender==response.data.msg.chats[0].from){
            var req = {
                'from':response.data.msg.chats[0].from,
                'fname':response.data.msg.chats[0].fname,
                'ftx':response.data.msg.chats[0].ftx,
                'to':response.data.msg.chats[0].to,
                'type':'plain',
                'body':response.data.msg.chats[0].body[i].text,
                'time':response.data.msg.chats[0].body[i].ttime,
                'img':response.data.msg.chats[0].body[i].img};
            }else{
            var req = {
                'from':response.data.msg.chats[0].to,
                'fname':response.data.msg.chats[0].tname,
                'ftx':response.data.msg.chats[0].ttx,
                'to':response.data.msg.chats[0].from,
                'type':'plain',
                'body':response.data.msg.chats[0].body[i].text,
                'time':response.data.msg.chats[0].body[i].ttime,
                'img':response.data.msg.chats[0].body[i].img};
            }
            that.Chathistory.push(req);
              }
          },
          (error)=>{
          console.log("err");
              });
          this.$previewRefresh();
          $('html, body').animate({scrollTop: $(document).height()}, 50);//滚动到底
        },
        handleAvatarSuccess(res, file) {//图片上传成功回调
            var date = new Date();
            var Month = date.getMonth()+1;
            var Day = date.getDate();
            var Hours = date.getHours();
            var Minutes = date.getMinutes();
            var time = Month + '月' + Day + '日' + '--' + Hours + ':' + Minutes;
            let that = this;
            var imgsrc='http://localhost:3000' + res.result
            // that.$http.post("http://localhost:3000/api/addchat",//加插进数据库
            // {
            // from:this.myid,
            // fname:this.myname,
            // ftx:this.mytx,
            // to:this.toid,
            // tname:this.toname,
            // ttx:this.totx,
            // text:this.Msg,
            // ttime:time,
            // img:String(imgsrc),
            // status:1,
            // }
            // ,{emulateJSON: true})
            // .then(
            // (response)=>{
            // console.log(response); 
            // },
            // (error)=>{
            // console.log(error);
            // }
            // );
            var req = {
            'from':this.myid,
            'fname':this.myname,
            'ftx':this.mytx,
            'to':this.toid,
            'tname':this.toname,
            'ttx':this.totx,
            'type':'plain',
            'body':this.Msg,
            'time':time,
            'img':imgsrc};
            that.Chathistory.push(req);
            this.$socket.emit('send_private_message', req);
            this.$previewRefresh();
            $('html, body').animate({scrollTop: $(document).height()}, 50);//滚动到底  
            },
  },
  sockets:{   
        receive_private_message:function (data) {// 接收私聊信息
        if(data.from==this.$route.params.tid){
          this.Chathistory.push(data);
          this.$previewRefresh();
          $('html, body').animate({scrollTop: $(document).height()}, 50);//滚动到底
        }
        },
        },
}
</script>

<style>
.Chat_body{
  margin-bottom: 50px;
  margin-top: 50px;
}
.Chat_top{
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 50px;
  position: fixed;
  top: 0;
}
.U_name{
  text-align: center;
}
.imgs{
  width: 50px;
  height: 50px;
  margin-right: 10px;
  margin-left: 10px;
  border-radius: 50%;
}
.img{
  max-width: 200px;
}
.Chat_to{
  margin: 15px;
  display: flex;
  justify-content: flex-end;
}
.Chat_time{
  color: #8a8a8a;
  font-size: 13px;
  text-align: center;
}
.Chat_t{
  display: flex;
  align-items: flex-start;
}
.Chat_ttextbox{
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 24px;
  letter-spacing:2px;
  padding: 10px;
  max-width: 250px;
  background-color: #2f44ff;
  border-radius: 10px;
  color:white;
}
.Chat_ftextbox{
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 24px;
  letter-spacing:2px;
  padding: 10px;
  max-width: 250px;
  background-color: #e4e4e4;
  border-radius: 10px;
}
.chat_text{
  white-space: pre-wrap;
  word-break: break-all;
}

.Chat_from{
  margin: 15px;
  display: flex;
  justify-content: flex-start;
}

.schat{
background-color:rgb(220, 220, 220);
width: 100%;
position:fixed;
bottom:0px;
left:0px;

display: flex;
flex-direction: column;
}
.footer{
display: flex;
justify-content: space-around;
align-items:center;
padding-left: 5px;
padding-right: 5px;
height: 50px;
}
.Pinput{
  max-width: 65;
  width: 65%;
  height: 35px;
  border: none;
  outline:none;
  font-size: 18px;
  text-indent: 10px;
  border-radius: 15px;
}
.Pinput:focus{
  border: none;
  outline:none
}
.Psend{
  width: 50px;
  height: 30px;
  background-color: green;
  border: none;
  color: white;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
  border-radius: 5px;
}
.Psendd{
  width: 50px;
  height: 30px;
  background-color: green;
  border: none;
  color: white;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
  border-radius: 5px;
  opacity: 0.6;
  cursor: not-allowed;
}
.bqbox{
  display: flex;
  justify-content: center;
}
.bq{
  font-size: 30px;
  width: 80%;
  height: 120px;
  display: flex;
  flex-wrap: wrap;
  overflow-y: scroll;
}
.Type{
    margin-left: 20px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 2px;
    padding-top: 2px;
    font-size: 12px;
    color: #008CBA;
    border: 2px solid #008CBA;
    border-radius: 5px;
}
</style>
